<template>
    <div class="music-player-box" :class="`${ isFloatWin ? 'float-win' : 'player-win' }`" :style="`--x: ${ playerWinPoint.x }; --y: ${ playerWinPoint.y }; --delay: ${ delay }s; transform: translate(${ move.x }px, ${ move.y }px)`" v-show="isPlaying">
        <div class="float-window-box" v-show="isFloatWin" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
            <div class="icon" :style="`--icon: url(${ base_url }/static/icon/music-float-window.svg)`"></div>
        </div>
        <div class="player-window-box" v-show="!isFloatWin">
            <div class="top-line">
                <div class="icon exit-btn" :style="`--icon: url(${ base_url }/static/icon/float-btn.svg)`" @click="toggleFloat"></div>
                <div class="icon more-btn" :style="`--icon: url(${ base_url }/static/icon/more.svg)`"></div>
            </div>
            <div class="main">
                <div class="music-cover"></div>
            </div>
            <div class="bottom-line">
                <div class="music-line">
                    <div class="info">
                        <div class="title text-ellipsis">无名的人</div>
                        <div class="singer text-ellipsis">毛不易</div>
                    </div>
                    <div class="btn-box">
                        <div class="icon" :style="`--icon: url(${ base_url }/static/icon/unlike.svg)`"></div>
                    </div>
                </div>
                <div class="music-progress">
                    <div class="progress-box">
                        <div class="progress"></div>
                    </div>
                </div>
                <div class="player-btn-line">
                    <div class="icon" :style="`--icon: url(${ base_url }/static/icon/liebiaoxunhuan.svg); --icon-size: 70%;`"></div>
                    <div class="icon" :style="`--icon: url(${ base_url }/static/icon/shangyishou.svg); --icon-size: 70%;`"></div>
                    <div class="icon player-btn" :style="`--icon: url(${ base_url }/static/icon/player-btn-white.svg); --icon-size: 40%;`"></div>
                    <div class="icon" :style="`--icon: url(${ base_url }/static/icon/xiayishou.svg); --icon-size: 70%;`"></div>
                    <div class="icon" :style="`--icon: url(${ base_url }/static/icon/music-list.svg); --icon-size: 65%;`"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { base_url } from '@/server/config';

import {
    // const
    isPlaying, isFloatWin, playerWinPoint, move, delay,
    // function
    toggleFloat,
    // touch function
    onTouchStart, onTouchMove, onTouchEnd,
} from '@/service/music/music_player.js';
</script>

<style scoped lang="less">
.music-player-box {
    box-sizing: border-box;
    --size: 15vw;
    width: var(--size);
    height: var(--size);
    position: fixed;
    top: var(--y);
    left: var(--x);
    background-color: #fff;
    border-radius: 1vw;
    box-shadow: 0 0 1vw rgba(0, 0, 0, 0.3);
    transition: all var(--delay), transform 0s;

    
    &.float-win {
        --size: 15vw;
        background-color: var(--float-win-bg-color);
    }

    &.player-win {
        --size: 100%;
        background-color: var(--music-player-bg-color);
    }

    .float-window-box {
        box-sizing: border-box;
        --size: 100%;
        width: var(--size);
        height: var(--size);
        padding: 1vw;

        .icon {
            --size: 100%;
            width: var(--size);
            height: var(--size);
        }
    }

    .player-window-box {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .top-line {
            box-sizing: border-box;
            width: 100%;
            padding: 5vmin;
            display: flex;
            justify-content: space-between;
            
            .icon {
                --size: 10vmin;
                width: var(--size);
                height: var(--size);
                --icon-size: 70%;
            }
        }

        .main {
            flex: 1;
            position: relative;

            .music-cover {
                --size: 85%;
                width: var(--size);
                height: var(--size);
                background-color: #ccc;
                border-radius: 3vmin;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .bottom-line {
            box-sizing: border-box;
            width: 100%;
            padding: 5vmin 5vmin 15vmin;
            display: flex;
            flex-direction: column;
            gap: 5vmin;

            .music-line {
                display: flex;
                justify-content: space-between;

                .info {
                    display: flex;
                    flex-direction: column;

                    .title {
                        max-width: 50vw;
                        font-size: 4vmin;
                    }

                    .singer {
                        max-width: 50vw;
                        font-size: 3.5vmin;
                    }
                }

                .icon {
                    --size: 10vmin;
                    --icon-size: 70%;
                    width: var(--size);
                    height: var(--size);
                }
            }

            .music-progress {
                padding: 0vmin 1vmin 7vmin;

                .progress-box {
                    width: 100%;
                    height: 1vmin;
                    background-color: #ccc;
                    border-radius: 1vmin;
                    position: relative;

                    &::before, &::after {
                        display: block;
                        position: absolute;
                        font-size: 3vmin;
                        top: 2vmin;
                    }

                    &::before {
                        content: "2:55";
                        left: 0;
                    }

                    &::after {
                        content: "4:00";
                        right: 0;
                    }

                    .progress {
                        width: 50%;
                        height: 100%;
                        background-color: #555;
                        position: absolute;
                        top: 0;
                        left: 0;

                        &::after {
                            --size: 2vmin;
                            content: "";
                            display: block;
                            width: var(--size);
                            height: var(--size);
                            background-color: #555;
                            border-radius: 50%;
                            position: absolute;
                            top: 50%;
                            right: 0;
                            transform: translateY(-50%);
                        }
                    }
                }
            }

            .player-btn-line {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-evenly;

                &>div {
                    --size: 10vmin;
                    width: var(--size);
                    height: var(--size);
                }

                .player-btn {
                    --size: 13vmin;
                    background-color: var(--music-player-btn-color);
                    border-radius: 50%;
                }
            }
        }
    }
}
</style>